<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layarea</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>
    <div class="layui-form">
        <div>实例1：默认</div>
        <div class="layui-form-item" id="area-picker">
            <div class="layui-form-label">网点地址1</div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="province" class="province-selector">
                    <option value="">--选择省--</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="city" class="city-selector">
                    <option value="">--选择市--</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="county" class="county-selector">
                    <option value="">--选择区--</option>
                </select>
            </div>
        </div>
        <div>实例2：使用默认值</div>
        <div class="layui-form-item" id="area-picker2">
            <div class="layui-form-label">网点地址2</div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="province2" class="province-selector" data-value="广东省">
                    <option value="">--选择省--</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="city2" class="city-selector" data-value="广州市">
                    <option value="">--选择市--</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="county2" class="county-selector" data-value="天河区">
                    <option value="">--选择区--</option>
                </select>
            </div>
        </div>
        <div>实例3：指定filter</div>
        <div class="layui-form-item" id="area-picker3">
            <div class="layui-form-label">网点地址3</div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="province3" class="province-selector" lay-filter="province-3">
                    <option value="">--选择省--</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="city3" class="city-selector" lay-filter="city-3">
                    <option value="">--选择市--</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="county3" class="county-selector" lay-filter="county-3">
                    <option value="">--选择区--</option>
                </select>
            </div>
        </div>
        <div>实例4：使用js赋值默认值和指定filter</div>
        <div class="layui-form-item" id="area-picker4">
            <div class="layui-form-label">网点地址4</div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="province4" class="province-selector" lay-filter="province-4">
                    <option value="">--选择省--</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="city4" class="city-selector" lay-filter="city-4">
                    <option value="">--选择市--</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="county4" class="county-selector" lay-filter="county-4">
                    <option value="">--选择区--</option>
                </select>
            </div>
        </div>
    </div>
    <script src="./layui/layui.js"></script>
    <script>
        //配置插件目录
        layui.config({
            base: './mods/'
            , version: '1.0'
        });
        //一般直接写在一个js文件中
        layui.use(['layer', 'form', 'layarea'], function () {
            var layer = layui.layer
                , form = layui.form
                , layarea = layui.layarea;

            let obj1 = layarea.render({
                elem: '#area-picker',
                change: function (res) {
                    //选择结果
                    console.log(res);
                }
            });
            layarea.render({
                elem: '#area-picker2',
                change: function (res) {
                    //选择结果
                    console.log(res);
                }
            });
            layarea.render({
                elem: '#area-picker3',
                change: function (res) {
                    //选择结果
                    console.log(res);
                }
            });
            layarea.render({
                elem: '#area-picker4',
                data: {
                    province: "广东省",
                    city: "深圳市",
                    county: "龙岗区",
                },
                change: function (res) {
                    //选择结果
                    console.log(res);
                }
            });

            //第一个重载
            setTimeout(() => {
                obj1.reload({
                    data: {
                        province: "河北省",
                        city: "邢台市",
                        county: "柏乡县",
                    }
                });
            }, 3000);
        });
    </script>
</body>

</html>